<template>
    <div>
        <Form :label-width="100" ref="form1" :model="form1">
            <Row  class="query-form2">
                <Col span="8">
                    <FormItem label="开始范围：" prop="reportDate">
                        <DatePicker type="daterange" style="width: 100%"  v-model="dateRange"  format="yyyy-MM-dd"  placeholder="请选择" ></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="组织机构：" prop="orgId" >
                        <cascaderDom style="width: 100%" ref="childConOrg"  @setOrgInfo="setOrgId"  @setOrgname="setOrgName" :currentOrgId = "form1.orgId"
                                    :currentOrgName = "form1.orgName"   :orgTree = "true"  ></cascaderDom>
                    </FormItem> 
                </Col>
                <Col span="8">
                    <div style="float: right;">
                        <Button class="ivu-btn-query"  icon="md-search"  @click="queryByType">查询</Button>
                        <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
                    </div>
                </Col>
            </Row>
        </Form>
        <Table ref='table'  :height="tableHeight" :loading="loading" border :columns="columns1"  :data="dataTable1">
        </Table>
    </div>
</template>

<script>

    import echarts from 'echarts'
    import {Api} from '../../../../api/index.js'
    import cascaderDom from "../../../../components/cascader-dom.vue"
    import { sessionStorage, cookie } from '../../../../common/cacheUtils.js';
	export default {
        components: {
            cascaderDom
        },
		data() {
			return {
                yanchiCss:'yanchiCss',
                weiguanbiCss: 'weiguanbiCss',
                loading: false,
                dataTable1:[],
                dataTable2:[],
                dataTable3:{deptDetail:[]},
                dataTable4:{deptDetail:[]},
                dateRange:[],
                tableHeight:0,
                pagedata: {
                  total: 0, //总条数
                  fromPage: 1,//从n条开始
                  pageSize: 10//每页多少条
                },

                form1:{
                    startDate:"",
                    endDate:"",
                    orgId:"",
                    orgName:"",
                    userId:""
                },
                columns1: [
                    {
                        title:"作业统计",
                        align: 'center',
                        children:[],
                    }
                ],
                columns2: [
                    {
                        title:"作业许可月度统计",
                        align: 'center',
                        children:[],
                    }
                ],                
                columns4: [
                    {
                        title:"作业许可月度统计",
                        align: 'center',
                        children:[],
                    }
                ]
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 105;
            this.form1.orgId = sessionStorage('userId').getObject('userId').orgId;
            this.form1.orgName = sessionStorage('userId').getObject('userId').orgName;
            this.form1.userId = sessionStorage('userId').getObject('userId').userId;
            setTimeout(()=>{
                this.$refs.childConOrg.setCurrentOrg
            },200)
            this.queryByType();
        },
        methods:{
            queryByType(){
                this.loading = true;
                this.form1.startDate = "";
                this.form1.endDate = "";
                if (this.dateRange[0]!=""&&this.dateRange[1]!=""){
                    this.form1.startDate =  this.formatDate(new Date(this.dateRange[0]), 'yyyy-MM-dd');
                    this.form1.endDate = this.formatDate(new Date(this.dateRange[1]), 'yyyy-MM-dd');
                }
                this.dataTable1.splice(0,this.dataTable1.length);
                this.columns1[0].children.splice(0, this.columns1[0].children.length);
                let url = Api.statisticsPtwByPtwType;
                this.$http.get(url, {params: this.form1}).then((res) => {
                    this.loading = false;
                    var item = res.data.grade[0];
                    this.columns1[0].children.push({
                        key: 'gradeName',
                        width: 100,
                        align: 'center',
                    });
                    item.typeList.forEach(item1=>{
                        this.columns1[0].children.push({
                            title: item1.typeName,
                            align: 'center',
                            key: item1.typeCode,
                        })
                    })
                    res.data.grade.forEach(item=>{
                        var data = {};
                        data["gradeName"] = item.gradeName;
                        item.typeList.forEach(item1=>{
                            data[item1.typeCode] = item1.ptwNum;
                        });
                        this.dataTable1.push(data);
                    })
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },
            setOrgId(data) {
                this.form1.orgId = data[data.length - 1];
            },
            setOrgName(data){
                this.form1.orgName = data;
            },
            reset(){
                this.form1 = {
                    startDate:"",
                    endDate:"",
                    orgId:"",
                    orgName:""
                }
                dateRange:[]
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            }
        }
    }
</script>
<style scoped>

table{
    border-collapse: collapse;
    border-spacing: 0px;
}

table,tr,td,caption{
    text-align:center;
    border:1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
}

td{
    height:80px;
}

.yanchiCss{
    background-color:yellow;
}

.weiguanbiCss{
    background-color:red;
}

</style>